<template>
<!-- 上传厂家证照的modal -->
  <div>
    <basic-modal :modalOpt="modal" :footer="null" @closeModal="closeModal">
      <template>
        <table-layout :haveSider="false">
          <template #searchBox>
            <search-layout
              :formInfos="q_formInfos"
              :formDatas="q_formDatas"
              message=""
              @onFind="onFind"
            ></search-layout>
          </template>
          <template #batchOperat>
            <batch-operat-btn 
              :optData="optText" @onOptData="onBatchAudit"
            >
            </batch-operat-btn>
          </template>
          <template #tableList>
            <a-list-table
              :columns="columns"
              :tableData="listdata"
              :pagination="pagination"
              :isSelecttion="true"
              :loading="loading"
              @onTableChange="handleTableChange"
              @onselectChange="onselectChange"
            >
            </a-list-table>
          </template>
        </table-layout>
      </template>
      
    </basic-modal>
  </div>
</template>

<script>
import basicModal from '../common/basicModal'
import searchLayout from '@/views/app/biz/common/searchLayout'
import batchOperatBtn from '@/views/app/biz/common/batchOperatBtn'
import tableLayout from '@/views/app/biz/common/index'
import aListTable from '@/views/app/biz/common/aListTable'
import {
  getByConditions,
  getByConditionsCount
} from '@/views/app/biz/salesGoods/salegoods'

const columns = [
  { title: '品名', dataIndex: 'pinMing', key: 'pinMing', align: 'center',},
  { title: '通用名', dataIndex: 'tongYongm', key: 'tongYongm', align: 'center' },
  { title: '注册证号', dataIndex: 'zhuCezh', key: 'zhuCezh', align: 'center', },
  { title: '规格', dataIndex: 'guiGe', key: 'guiGe', align: 'center' },
  { title: '型号', dataIndex: 'xingHao', key: 'xingHao', align: 'center' },
  { title: '计量单位', dataIndex: 'jiLiangdw', key: 'jiLiangdw', align: 'center' },
  { title: '单价', dataIndex: 'hanShuidj', key: 'hanShuidj', align: 'center' },
  { title: '生产企业名称', dataIndex: 'shengChanqymc', key: 'shengChanqymc', align: 'center', },
  { title: '状态', dataIndex: 'zhuangTai', key: 'zhuangTai', align: 'center' ,scopedSlots: { customRender: 'zhuCezZhuangtstai_ZZ' }}, 
]

export default {
  components: {
    basicModal,
    searchLayout,
    batchOperatBtn,
    tableLayout,
    aListTable
    
  },
  data() {
    return {
      loading: false,
      modal: {
        modalVisible: false,
        modalTitle: '选择商品',
        modalWidth: '80vw',
        maxHeight:'70vh'
      },
      pagination: {
        //分页配置
        current: 1, //当前页码 current
        pageSize: 10, //每页显示条数 pageSize
        total: 1,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['2', '10', '50', '100'],
      },
      // 查询表单
      q_formInfos: [
        { label: '品名', name: 'pinMing', type: 'input', placeholder: '品名' },
        { label: '注册证号',name: 'zhuCezhPid',type: 'zchselect', zhuangTai:'4',placeholder: '注册证号'},
        { label: ['查询', '重置'], type: 'botton' }
      ],
      // 查询表单绑定数据
      q_formDatas: {
        pinMing: null,
        zhuCezhPid: null,
      },
      columns: columns,
      listdata: [],
      pid:'',
      optText: '批量添加',
      selectedRowKeys: [],
      selectedRows: [],
    }
  },
  computed: {},
  mounted() {},
  methods: {
    // 点击了添加
    addModal(val) {
      this.modal.modalVisible = true
      this.modal.modalTitle = '选择商品'
      this.pid=val
      this.getTotal()
      this.getList(this.q_formDatas)
    },
    // 关闭模态详细框
    closeModal() {
      this.modal.modalVisible = false
      this.selectedRowKeys = []
      this.selectedRows = []
      this.$emit('close')
    },
    // 添加到表格
    onSubmit(form){
      console.log(form);
      this.$emit('onAddInfo',form)
    },
    // 初始化页面时得到总数
    async getTotal() {
      let pages = ''
      pages = await getByConditionsCount(this.q_formDatas)
      console.log(pages)
      if (pages && pages.code && pages.code === 'C1') {
        const pagination = { ...this.pagination }
        pagination.total = pages.data
        this.pagination = pagination
        this.pagination.showTotal =  (showTotal) => {return `共 ${showTotal} 条`}
      }
    },
    // 初始化查询时的数据列表
    async getList(params) {
      console.log('请求列表时传入的数据', params)
      this.loading = true
      let listdata = []
      let res = ''
      res = await getByConditions(params, this.pagination)
      this.loading = false
      console.log(res)
      if (res && res.code && res.code === 'C1' && res.data) {
        const resdata = res.data
         for (let item of resdata) {
            listdata.push({
               key: item.pid,
               ...item
               }
            )
         }
         this.listdata =listdata
      } else {
        this.listdata = []
      }
    },
    // 触发改变页码,筛选,排序时的回调
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.getList(this.q_formDatas)
    },
    // 查询按钮
    onFind (){
      this.pagination.current = 1
      this.getTotal()
      this.getList(this.q_formDatas)
    },

    // 多选批量操作
    onselectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    onBatchAudit() {
      if (this.selectedRows.length) {
        this.$emit('onAddInfo',this.selectedRows)
      } else {
        this.$message.warning({ content: '未选择要添加的商品', duration: 3 })
      }
    }
  },
}
</script>

<style>
.recordBox{
  width: 100%;
  min-height: 80px;
}
</style>